<template>
    <div class="sbearch">
        <input type="text" v-model="searchValue"> <button @click="search()">搜索</button>
        <table border="1" cellspacing="0" cellpadding="5">
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>手机号</th>
            </tr>
            <tr v-for="(item, index) in list" :key="index">
                <td>{{ item.name }}</td>
                <td>{{ item.sex }}</td>
                <td>{{ item.age }}</td>
                <td>{{ item.phone }}</td>
            </tr>
        </table>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { Ref } from 'vue';


const searchValue: Ref<string> = ref('');
interface listTs {
    name: string,
    sex: string,
    age: number,
    phone: string
}
const list: Ref<listTs[]> = ref([{ name: '张三', sex: '女', age: 19, phone: '18921212121' },
{ name: '李四', sex: '男', age: 29, phone: '18921221122' },
{ name: '王五', sex: '女', age: 39, phone: '18921788723' },
{ name: '赵六', sex: '男', age: 49, phone: '18921556124' },
{ name: '曾七', sex: '男', age: 29, phone: '18921221125' },
{ name: '刘八', sex: '女', age: 39, phone: '18921788726' },
{ name: '黄九', sex: '男', age: 29, phone: '18921221127' },
{ name: '王五', sex: '女', age: 39, phone: '18921788728' },
{ name: '王五', sex: '女', age: 39, phone: '18921788729' },
{ name: '赵六', sex: '男', age: 49, phone: '18921556110' },
{ name: '李思思', sex: '男', age: 29, phone: '18921221111' },
{ name: '张三', sex: '女', age: 19, phone: '18921212112' },
{ name: '李四', sex: '男', age: 29, phone: '18921221113' },
{ name: '王五', sex: '女', age: 39, phone: '18921788714' },
{ name: '赵六', sex: '男', age: 49, phone: '18921556115' },
{ name: '李四', sex: '男', age: 29, phone: '18921221116' },
{ name: '王五', sex: '女', age: 39, phone: '18921788717' },
{ name: '李四', sex: '男', age: 29, phone: '18921221118' },
{ name: '王五', sex: '女', age: 39, phone: '18921788719' },
{ name: '王五', sex: '女', age: 39, phone: '18921788720' },
{ name: '赵六', sex: '男', age: 49, phone: '18921556131' },
{ name: '李五五', sex: '男', age: 29, phone: '18921221133' }]);
const oldList: Ref<listTs[]> = ref([{ name: '张三', sex: '女', age: 19, phone: '18921212121' },
{ name: '李四', sex: '男', age: 29, phone: '18921221122' },
{ name: '王五', sex: '女', age: 39, phone: '18921788723' },
{ name: '赵六', sex: '男', age: 49, phone: '18921556124' },
{ name: '曾七', sex: '男', age: 29, phone: '18921221125' },
{ name: '刘八', sex: '女', age: 39, phone: '18921788726' },
{ name: '黄九', sex: '男', age: 29, phone: '18921221127' },
{ name: '王五', sex: '女', age: 39, phone: '18921788728' },
{ name: '王五', sex: '女', age: 39, phone: '18921788729' },
{ name: '赵六', sex: '男', age: 49, phone: '18921556110' },
{ name: '李思思', sex: '男', age: 29, phone: '18921221111' },
{ name: '张三', sex: '女', age: 19, phone: '18921212112' },
{ name: '李四', sex: '男', age: 29, phone: '18921221113' },
{ name: '王五', sex: '女', age: 39, phone: '18921788714' },
{ name: '赵六', sex: '男', age: 49, phone: '18921556115' },
{ name: '李四', sex: '男', age: 29, phone: '18921221116' },
{ name: '王五', sex: '女', age: 39, phone: '18921788717' },
{ name: '李四', sex: '男', age: 29, phone: '18921221118' },
{ name: '王五', sex: '女', age: 39, phone: '18921788719' },
{ name: '王五', sex: '女', age: 39, phone: '18921788720' },
{ name: '赵六', sex: '男', age: 49, phone: '18921556131' },
{ name: '李五五', sex: '男', age: 29, phone: '18921221133' }]);
function search() {
    // console.log(this.searchValue);
    // 过滤
    list.value = oldList.value.filter(item => {
        // 查找迭代值 不等于-1的结果
        // return item.name.indexOf(this.searchValue) != -1 || 
        //     item.sex.indexOf(this.searchValue) != -1 ||
        //     String(item.age).indexOf(this.searchValue) != -1 || 
        //     item.phone.indexOf(this.searchValue) != -1
        // console.log();
        return JSON.stringify(item).indexOf(searchValue.value) != -1
    })
}
</script>
<style></style>